<template>
  <el-dialog
      v-model="editDialogVisible"
      title="编辑用户信息"
      width="30%"
      center
      @close="closeEditDialog(false)"
  >
    <el-form ref="editUserForm" :model="editForm" :rules="userRules" label-width="120px" class="demo-dynamic" status-icon>
      <el-form-item label="用户名" prop="user_name">
        <el-input v-model="editForm.user_name" placeholder="Enter house_name...">

        </el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="editForm.age" placeholder="Enter address...">

        </el-input>
      </el-form-item>
      <el-form-item label="性别 " prop="sex">
        <el-input v-model="editForm.sex" placeholder="Enter family_id...">

        </el-input>
      </el-form-item>
      <el-form-item label="邮箱 " prop="email">
        <el-input v-model="editForm.email" placeholder="Enter region_id...">

        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => {
          closeEditDialog(false);
        }">取消</el-button>
        <el-button type="primary" @click="submitEdit"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script >
import {reactive, toRefs, ref, onMounted} from "vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";
//邮箱规则校验
function userCheckMail(){
  const checkMail = (rule, value, cb) => {
    const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    if (regEmail.test(value)){
      return cb();
    }
    cb(new Error("请输入合法的邮箱"));
  }
  return {
    checkMail,
  };
}
//加载编辑数据
function useLoadEditData(state){
  console.log("123321")
  axios.get("/api/user?ID="+state.editForm.ID).then((res) => {
    console.log(res)
    console.log("123321")
    state.editForm = res.data.data.res
  })
}
//提交编辑
function useEditData(state, editUserForm, emit){
  const submitEdit = () => {
    const params = {
      ID: state.editForm.ID,
      user_name: state.editForm.user_name,
      email: state.editForm.email,
      age: state.editForm.age,
      sex: state.editForm.sex
    }
    editUserForm.value.validate((valid) => {
      if(valid){
        axios.put("/api/user", (params)).then((res) => {
          emit("onCloseEditDialog", false, res)
        })
      }
    })
  }
  return {
    submitEdit
  }
}
export default {
  name: "EditUser",
  props: {
    editDialogVisible:Boolean,
    uId:Number
  },
  emits: ["onCloseEditDialog"],
  setup(props, {emit}) {
    const state = reactive({
      editDialogVisible: props.editDialogVisible,
      editForm: {
        ID: props.uId,
        user_name:"",
        password: "",
        email: "",
        age:0,
        sex:"",
      }
    })
    const userRules = {
      user_name: [{required: true, message: 'Please input house_name', trigger: 'blur',}],
      age: [{required: true, message: 'Please input house_name', trigger: 'blur',}],
      sex: [{required: true, message: 'Please input house_name', trigger: 'blur',}],
      email: [
        {required: true, message: 'Please input correct email', trigger: 'blur'},
        {validator:userCheckMail().checkMail, trigger: 'blur'}
      ],
    }
    const editUserForm = ref();
    const closeEditDialog = (visible) => {
      emit("onCloseEditDialog", visible)
    }
    onMounted(() => {
      useLoadEditData(state)
    })
    return {
      ...toRefs(state),
      userRules,
      editUserForm,
      closeEditDialog,
      ...useEditData(state, editUserForm, emit)
    }
  }
}
</script>

<style scoped>

</style>